<template>
  <div class="section-wrap">
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知标题</label>
          <i class="iconfont icon-required"></i>
        </div>
        <div>
          <input type="text" v-model="param.title" :disabled="isdisabled" />
        </div>
      </div>
      <div class="form-item form-item-style2">
        <div class="label-title">
          <label>通知内容</label>
          <i class="iconfont icon-required"></i>
        </div>
        <div>
          <textarea placeholder="请输入通知内容（自行换行）" v-model="param.content" :disabled="isdisabled"></textarea>
        </div>
      </div>

      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>发布范围</label>
          <i class="iconfont icon-required"></i>
        </div>
        <div>
          <group>
            <div>
              <div class="right-select" @click="selectTypeUser">
                {{$store.state.checkcompany.deptName?$store.state.checkcompany.deptName:userdepartname}}
                <i
                  class="iconfont icon-jinru rightmsg"
                ></i>
              </div>
            </div>
          </group>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>重要通知</label>
          <i class="iconfont icon-required"></i>
        </div>
        <group>
          <x-switch title="重要通知" v-model="param.contenttip" :disabled="isdisabled"></x-switch>
        </group>
      </div>
      <div class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>图片附件</label>
            <i class="iconfont icon-required"></i>
          </div>
        </div>
        <div class="upload-wrap">
          <upload
            @setFormData="setYSFormData"
            :uploadImgss="hiddenmeta.uploadImgs"
            :images="hiddenmeta.images"
          ></upload>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>发布人</label>
          <i class="iconfont icon-required"></i>
        </div>
        <div>
          <group>
            <div>
              <popup-picker
                :data="hiddenmeta.list1"
                placeholder="请选择"
                :columns="1"
                v-model="troubletypedata"
              ></popup-picker>
            </div>
          </group>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>发布日期</label>
          <i class="iconfont icon-required"></i>
        </div>
        <div>
          <input type="text" v-model="param.sendDate" disabled />
        </div>
      </div>
      <p class="search-btn" @click="SaveNotice" v-if="isedit">提交</p>
    </div>
    <!--人员树-->
    <div v-transfer-dom>
      <popup v-model="classValue" width="100%">
        <ztree :data="data" :name="'departName'"></ztree>
      </popup>
    </div>
     <myMenu></myMenu>
  </div>
</template>
<script type="text/javascript">
import chooseImage from "@/commonComponents/chooseImage/index";
import formatDate from "@/utils/formatDate";
import upload from "@/commonComponents/upload/index";
import myMenu from "@/commonComponents/menu";
import { XSwitch, Popup, TransferDom } from "vux";
import selectDepart from "@/commonComponents/selectUser/selectUser";
import ztree from "@/commonComponents/selectUser";
export default {
  directives: {
    TransferDom
  },
  components: {
    Popup,
    upload,
    myMenu,
    XSwitch,
    ztree,
    selectDepart,
    chooseImage,
    myMenu,
    TransferDom
  },
  data() {
    return {
      userdepartname: "",
      isedit: true,
      isdisabled: false,
      userInfo: {}, // 用户信息
      classValue: false,
      classValue1: false,
      data: [
        {
          Id: "",
          Name: "",

          children: [
            {
              Id: 1,
              Name: ""
            }
          ]
        }
      ],
      param: {
        fb: "",
        filecontent: "",
        title: "",
        content: "",
        sendperson: "",
        sendDate: "",
        contenttip: false,
        IssueDeptID: "",
        issueDeptName: "",
        Url: []
      },
      hiddenmeta: {
        list1: []
      },
      troubletypedata: [],
      listfb: [],
      YSFormData: "", // 验收后上传图片formData对象
      YSuploadLength: 0, // 验收后上传图片数量
      hiddenmeta: {
        uploadImgs: [],
        images: []
      },
      Fbuserid: ""
    };
  },

  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));

    this.userId = this.userInfo.userid;
    this.tokenId = this.userInfo.tokenId;
    this.projectId = this.userInfo.deptid;
    this.business = this.$route.query.business || "GetHdProjects";
    let operate = this.$route.query.operate;
    if (operate == "add") {
      this.isdisabled = false;
    }
    if (operate == "edit") {
      this.isdisabled = true;
      this.isedit = false;
      let id = this.$route.query.id;
      this.getInfo(id);
    }
    this.param.sendDate = this.getdatenew();
    this.param.sendperson = this.userInfo.username;
    this.getFbPerson();
  },
  methods: {
    setYSFormData(formData, uploadLength) {
      // console.log(formData)
      this.YSFormData = formData;
      this.YSuploadLength = uploadLength;
    },
    SaveNotice() {
      if (!this.param.title) {
        this.$vux.toast.text("请输入公告标题");
        return false;
      }
      if (!this.param.content) {
        this.$vux.toast.text("请输入公告内容");
        return false;
      }
      if (!this.troubletypedata) {
        this.$vux.toast.text("请输入发布人");
        return false;
      }

      //根据事故类别名称查code
      this.listfb.forEach(res => {
        if (res.name == this.troubletypedata[0]) {
          this.param.Fbuserid = res.id;
        }
      });
      let params = {
        allowPaging: true,
        business: "ReportAffiche",
        data: {
          IsImportant: 0,
          IssueTime: this.param.sendDate,
          content: this.param.content,
          issueDeptId: this.userInfo.userid,
          issueDeptName: "公司一",
          issuer: this.param.Fbuserid,
          save: false,
          status: "1",
          title: this.param.title
        },
        method: "new",
        pageIndex: 0,
        pageSize: 0,
        tokenId: "",
        userId: this.userInfo.userid
      };
      this.$axiosAjax.getConfigJson(params, this.YSFormData).then(res => {
        if (res.data.code == "0") {
          this.$router.push("/broadcast");
        }
      });
    },
    getInfo(valid) {
      let params = {
        allowPaging: true,
        business: "AfficheDetails",
        data: {
          ID: valid
        },
        pageIndex: 0,
        pageSize: 0,
        tokenId: "",
        userId: this.userInfo.userid
      };
      this.$axiosAjax.getConfigJson(params).then(res => {
        if (res.data.code == "0") {
          let result = res.data.data;
          this.param.title = result.Title;
          this.param.content = result.Content;
          this.param.sendDate = result.IssueTime;
          this.param.sendperson = result.Issuer;
          this.param.IssueDeptID = result.IssueDeptID;
          this.param.IssueDeptName = result.IssueDeptName;
          this.param.fb = result.IssueDeptName;
          this.param.contenttip = result.IsImportant == 0 ? false : true;
          this.param.Url = result.Url;
        }
      });
    },
    getFbPerson() {
      let params = {
        allowPaging: true,
        business: "getPersonPage",
        data: {
          Identity: "",
          Name: "",
          departId: this.userInfo.deptid
        },
        pageIndex: 0,
        pageSize: 20,
        tokenId: "",
        userId: this.userInfo.userid
      };
      this.$axiosAjax.getConfigJson(params).then(res => {
        let listArr = [];
        let cateList = [];
        if (res.data.code == 0) {
          listArr = res.data.data;
          this.listfb = listArr;
        }
        listArr.forEach((item, index) => {
          cateList.push(item.name);
        });

        this.hiddenmeta.list1 = cateList;
      });
    },
    getdatenew() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    selectTypeUser() {
      this.classValue = true;
      let param = {
        allowPaging: false,
        business: "GetCheckWorkUser",
        data: this.projectId,
        pageIndex: 0,
        pageSize: 0,
        tokenId: this.tokenId,
        userId: this.userId
      };
      this.$axiosAjax.getConfigJson(param).then(res => {
        this.data = res.data.data;
      });
    }
  }
};
</script>
<style scoped>
.search-btn {
  width: 200px;
  line-height: 40px;
  border-radius: 20px;
  margin: 23px auto;
  text-align: center;
  color: #fff;
  background: #2269ff;
}
.search-btn:hover {
  opacity: 8;
}

.red {
  color: red;
}
input {
  text-align: right;
  font-size: 12px;
}
.search-btn {
  width: 200px;
  line-height: 40px;
  border-radius: 20px;
  margin: 23px auto;
  text-align: center;
  color: #fff;
  background: #2269ff;
}
.search-btn:hover {
  opacity: 8;
}

.select-section {
  display: flex;
}
.select-section div {
  padding-left: 26px;
  background: url(../../../static/images/select.png) no-repeat left center;
  background-size: 17px 17px;
}
.select-section div:first-child {
  margin-right: 58px;
}
.select-section .active {
  background: url(../../../static/images/selected.png) no-repeat left center;
  background-size: 17px 17px;
}
.form-item input[disabled] {
  background-color: #fff;
}
.zanspan {
  font-size: 9px;
  color: #2269ff;
  margin-left: 6px;
}
</style>